<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用axios发送异步请求</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vuejs-2.5.16.js"></script>


</head>
<body>
<div id="app">
    用户名:<span v-html="user.username"></span></br>
    密码:<span v-html="user.password"></span></br>
    职务:<span v-html="user.nickname"></span></br>
    <a href="javascript:" @click="fn1()">使用axios发送get请求的异步请求</a></br>
    <a href="javascript:" @click="fn2()">使用axios发送post请求的异步请求</a></br>
</div>
<script type="text/javascript">
    new Vue({
       el:"#app",
       data:{
         user:{}
       },
        methods:{
            //使用axios发送get异步请求
            fn1(){
            //      axios.get("demo01?username=admin&password=888&nickname=管理员").then(response=>{//ES6的箭头函数
            //            // 处理服务器回写给客户端的数据
            //           this.user=response.data;
            //         // alert(response)
            //      }).catch(error=>{
            //     //     //处理异常  error服务异常信息
            //          console.log(error);
            //      });


                axios.get("demo01",{
                    params:{
                        username:"admin",
                        password:"888",
                        nickname:"管理员"
                    }
                }).then( response=> {//ES6的箭头函数
                    //处理响应数据response服务器响应的数据
                    this.user=response.data;
                    //  alert(response);
                }).catch(error=> {
                    //处理异常  error服务异常信息
                    console.log(error);
                });
            },
            fn2(){
                // axios.post("demo01?username=admin&password=888&nickname=管理员").then(response=>{
                //     this.reponse=response.data;
                // }).catch(error=>{
                //    console.log(error)
                // });
                axios.post("demo01",{username:"admin",password:"888",nickname:"管理员"}).then(response=>{
                    this.reponse=response.data;
                }).catch(error=>{
                    console.log(error)
                });
            }
        }
    });
</script>

</body>
</html>